<template>
  <el-row class="page-product">
    <el-col :span="19">
      <crumbs :keyword="keyword"/>
      <category
        :types="types"
        :areas="areas"/>
      <list :list="list"/>
    </el-col>
    <el-col :span="5">
      <amap
        v-if="point.length"
        :width="230"
        :height="290"
        :point="point"/>
    </el-col>
  </el-row>

</template>
<script>
  import Crumbs from '@/components/products/crumbs.vue'
  import Category from '@/components/products/category.vue'
  import List from '@/components/products/list.vue'
  import Amap from '@/components/public/map.vue'
  export default {
    components:{
      Crumbs,
      Category,
      List,
      Amap
    },
    data(){
      return {
        list:[],
        types:[],
        areas:[],
        keyword:'',
        point:[]
      }
    },
    async asyncData(ctx){
      let keyword = ctx.query.keyword
      let city = ctx.store.state.geo.position.city
      let res = await ctx.$axios.get('/search/resultsByKeywords',{
        params:{
          keyword,
          city
        }
      })
      let crumbs = await ctx.$axios.get('/categroy/crumbs',{
        params:{
          city
        }
      })
      let pois = res.pois || []
      let areas = crumbs.areas || []
      // let types = crumbs.types || []
      let types = [{type: '美食'}, {type:'生活服务'}, {type:'宴会'}, {type:'时尚购'}, {type:'丽人'}, {type:'汽车服务'}]
      let point = pois.find(item=>item.location) || ''
     return {
          list: pois.filter(item=>item.photos.length).map(item=>{
            return {
              type: item.type,
              img: item.photos[0].url,
              name: item.name,
              comment: Math.floor(Math.random()*10000),
              rate: Number(item.biz_ext && item.biz_ext.rating) || 0,
              price: Number(item.biz_ext && item.biz_ext.cost),
              scene: item.tag,
              tel: item.tel,
              status: '可订明日',
              location: item.location || '',
              module: item.type.split(';')[0]
            }
          }),
          keyword,
          areas: areas.filter(item=>item.type!=='').slice(0,5),
          types: types.filter(item=>item.type!==''),
          point: point
        }

    }
  }
</script>

<style lang="scss">
  @import "assets/css/products/index.scss";
</style>
